<template>
  <div>
    <i ref="iconArrow" class="el-icon-arrow-right" @click="changeArrow" />
    <el-button type="primary" icon="el-icon-plus" @click="addUsers">增加</el-button>
    <el-button type="primary" icon="el-icon-copy-document" @click="copyUsers">复制</el-button>
    <el-button type="danger" icon="el-icon-delete" @click="deleteUsers">删除</el-button>
    <el-dropdown
      split-button
      type="primary"
      @command="changeStatus"
    >
      启停控制
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          command="enable_command"
        >启用</el-dropdown-item>
        <el-dropdown-item
          command="disable_command"
        >停用</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-button type="primary" icon="el-icon-plus" @click="assignRole">分配角色</el-button>
  </div>
</template>

<script>
export default {
  name: 'Operation',
  methods: {
    changeArrow() {
      this.$emit('changeArrow')
    },
    addUsers() {
      this.$emit('addUsers')
    },
    copyUsers() {
      this.$emit('copyUsers')
    },
    deleteUsers() {
      this.$emit('deleteUsers')
    },
    changeStatus(command) {
      this.$emit('changeStatus', command)
    },
    assignRole() {
      this.$emit('assignRole')
    }
  }
}
</script>

<style scoped lang="scss">
.el-dropdown {
    vertical-align: top;
    margin:0 10px;
  }
</style>
